<template>
  <div class="search_control">
    <h6><i class="es-iconfont icon-search"></i>Search info</h6>
    <div class="es-input-group">
      <input type="text" class="es-input" placeholder="keywords" />
      <div class="es-input-group-append">
        <button class="es-button">
          <i class="es-iconfont icon-search"></i>
        </button>
      </div>
    </div>
    <div class="keyword_box">
      <router-link
        :to="{ path: item.path, params: { ...item.params } }"
        v-for="(item, index) in data"
        :key="index"
      >
        {{ item.name }}
        <div
          class="es-divider es-divider-vertical es-divider-default"
          v-if="index < data.length - 1"
        ></div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchControl",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style lang="scss">
.search_control {
  margin: -8.125rem 1.875rem 0 1.875rem;
  background-color: var(--purple);
  padding: 1.25rem;
  border-radius: 0.25rem;
  color: var(--white);
  h6 {
    i {
      margin-right: 0.3125rem;
    }
  }
  .keyword_box {
    margin: 0.625rem 0.375rem 0 0.375rem;
    a {
      color: var(--white);
      .es-divider {
        background-color: var(--white);
      }
    }
  }
}
</style>
